<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>第一个three.</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/GLTFLoader.js"></script>
  </head>

  <body onload="OnLoad()">
    <script>
      let container;

      let camera, scene, renderer;

      let mouseX = 0,
        mouseY = 0;

      let windowHalfX = window.innerWidth / 2;
      let windowHalfY = window.innerHeight / 2;

      let object;
      const mouse = new THREE.Vector3();
      const raycaster = new THREE.Raycaster();
      let mesh;
      let group = new THREE.Group();
      function OnLoad() {
        init();
        animate();
      }

      function init() {
        container = document.createElement("div");
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(
          45,
          window.innerWidth / window.innerHeight,
          1,
          2000
        );
        camera.position.z = 250;

        // scene

        scene = new THREE.Scene();

        const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
        scene.add(ambientLight);

        const pointLight = new THREE.PointLight(0xffffff, 0.8);
        camera.add(pointLight);
        scene.add(camera);
        const controls = new THREE.OrbitControls(camera);
        

        const color = new THREE.Color("red");

        // manager

        function loadModel() {
          console.log(object);
          var color = new THREE.Color("#79DA7A");

          object.traverse(function (child) {
            if (child.isMesh) {
              // child.material.map = color;
              child.material.forEach((o, index) => {
                o.color = color;
                o.transparent = true;
                o.opacity = 0.8;
                child.position.z = -25;
              });
              scene.add(child);
              console.log(scene);
            }
          });
        }

        const manager = new THREE.LoadingManager(loadModel);
        const axes = new THREE.AxesHelper(500);
        scene.add(axes);
        console.log(scene.child);

        manager.onProgress = function (item, loaded, total) {
          console.log(item, loaded, total);
        };

        // texture

        const textureLoader = new THREE.TextureLoader(manager);
        const texture = textureLoader.load("./public/UV_Grid_Sm.jpeg");

        // model

        function onProgress(xhr) {
          if (xhr.lengthComputable) {
            const percentComplete = (xhr.loaded / xhr.total) * 100;
            console.log(
              "model " + Math.round(percentComplete, 2) + "% downloaded"
            );
          }
        }

        function onError() {}

        const loader = new THREE.OBJLoader(manager);
        loader.load(
          "./public/productline.obj",
          function (obj) {
            object = obj;
            console.log(object);
          },
          onProgress,
          onError
        );

        //

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        document.addEventListener("mousemove", onDocumentMouseMove);

        window.addEventListener("resize", onWindowResize);
      }

      function onWindowResize() {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function onDocumentMouseMove(event) {
        mouseX = (event.clientX - windowHalfX) / 8;
        mouseY = (event.clientY - windowHalfY) / 8;
      }


      function animate() {
        requestAnimationFrame(animate);
        render();
      }

      function render() {
        // camera.position.x += (mouseX - camera.position.x) * 0.01;
        // camera.position.y += (-mouseY - camera.position.y) * 0.01;

        camera.position.z = 15;

        raycaster.setFromCamera(mouse, camera);
        const color = new THREE.Color("yellow");
        let intersects = raycaster.intersectObjects(scene.children, true);
        console.log(intersects);
        for (var i = 0; i < intersects.length; i++) {
          intersects[i].object.material.color = color;
        }

        camera.lookAt(scene.position);

        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
